<template>
	<div class="rule" id="app">
		规则列表
		<div>
			<el-row type="flex" justify="start">
				<el-popover placement="top" width="280" v-model="visible">
					<el-row type="flex" style="margin-top: 10px;" justify="start">
						<el-button disabled>规则</el-button>
						<el-input style="width: 250px;" v-model="a" placeholder="用户名" class="handle-input mr10"></el-input>
					</el-row>
					<div style="text-align: right; margin: 0">
						<el-button size="mini" type="text" @click="visible = false">取消</el-button>
						<el-button type="primary" size="mini" @click="visible = false; addRule()">确定</el-button>
					</div>
					<el-button style="margin-left: 10px;" slot="reference" type="success" icon="el-icon-user">添加规则</el-button>
				</el-popover>
			</el-row>
		</div>
		<div>
			<el-row type="flex" style="margin-top: 10px;" justify="start">
				<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
				 @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" align="center"></el-table-column>
					<el-table-column prop="id" label="ID" width="50" align="center"></el-table-column>
					<el-table-column prop="name" label="用户名" width="70"></el-table-column>
					<el-table-column label="昵称">
						<template slot-scope="scope">{{scope.row.fullname}}</template>
					</el-table-column>
					<el-table-column label="昵称">
						<template slot-scope="scope">{{scope.row.fullname}}</template>
					</el-table-column>
					<el-table-column prop="address" label="登陆时间" ></el-table-column>
					<el-table-column prop="date" label="注册时间" ></el-table-column>
					<el-table-column label="操作" width="180" align="center">
						<template slot-scope="scope">
							<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-row>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize"
				 :total="pageTotals" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>
		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="用户名">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="form.fullname"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {mapState,mapMutations,mapActions} from 'vuex'
	export default {
		name: 'rule',
		components: {},
		data() {
			return {
				a: '',
				visible: false,
				query: {
					address: '',
					name: '',
					pageIndex: 1,
					pageSize: 10
				},
				tableData: [{id:'1',name: 'aa',fullname: 'aaa',address:'aaa',date:'aaaa'}],
				multipleSelection: [],
				delList: [],
				editVisible: false,
				pageTotal: 0,
				form: {},
				idx: -1,
				id: -1
			}
		},
		computed:{
			...mapState(['token']),
			pageTotals(){ // 页
				return this.tableData.length
			}
		},
		methods: {
			addRule(){
				// 
			},
			listRule(){
				console.log(this.token)
				this.$http.get('admin/authgroup/index',{headers:{'Authorization': 'Bearer ' + this.token}}).then((res)=>{
					// this.$notify({title: res.data.notice,message: '史诗由你开始!',type: 'success'});
					console.log(res)
					}).catch((err)=>{
						console.log(err)
					});
			},
			// 删除操作
			handleDelete(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$message.success('删除成功');
						this.tableData.splice(index, 1);
					})
					.catch(() => {});
			},
			// 多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			delAllSelection() {
				const length = this.multipleSelection.length;
				let str = '';
				this.delList = this.delList.concat(this.multipleSelection);
				for (let i = 0; i < length; i++) {
					str += this.multipleSelection[i].name + ' ';
				}
				this.$message.error(`删除了${str}`);
				this.multipleSelection = [];
			},
			// 编辑操作
			handleEdit(index, row) {
				this.idx = index;
				this.form = row;
				this.editVisible = true;
			},
			// 保存编辑
			saveEdit() {
				this.editVisible = false;
				this.$message.success(`修改第 ${this.idx + 1} 行成功`);
				this.$set(this.tableData, this.idx, this.form);
				// 获得修改项，发起修改请求
				console.log(JSON.stringify(this.form.thumb)+this.form.name+"编辑了")
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			}
		},
		beforeCreate: function() {
			console.log('1-beforeCreate 初始化之后')
		},
		created: function() {
			this.listRule()
			console.log('2-created 创建完成')
		},
		beforeMount: function() {
			console.log('3-beforeMount 挂载之前')
		},
		mounted: function() {
			console.log('4-mounted 被创建')
		},
		beforeUpdate: function() {
			console.log('5-beforeUpdate 数据更新前')
		},
		updated: function() {
			console.log('6-updated 被更新后')
		},
		activated: function() {
			console.log('7-activated 激活的')
		},
		deactivated: function() {
			console.log('8-deactivated 暂停')
		},
		beforeDestroy: function() {
			console.log('9-beforeDestroy 销毁之前')
		},
		destroyed: function() {
			console.log('10-destroyed 销毁之后')
		}
	}
</script>

<style scoped>
</style>
